<template>
  <div class="hv-designer-layer-panel-container">
    <div class="hv-designer-layer-panel-center" v-hv-scrollbar>
      <hv-designer-layer-panel-tree :layerData="layerData" ref="layerTreeRef" />
    </div>
    <div class="hv-designer-layer-panel-bottom">
      <div
        class="hv-designer-layer-panel-bottom-btn hv-designer-layer-panel-bottom-btn-folder"
        title="添加图层组"
        @click="addGroup"
      >
        <hv-dynamic-icon :iconName="'FolderOutlined'" />
      </div>
      <a-popconfirm title="您确认删除图层吗?" @confirm="deleteCheckedNodes" overlayClassName="hv-dark-popover">
        <div class="hv-designer-layer-panel-bottom-btn" title="删除图层">
          <hv-dynamic-icon :iconName="'DeleteOutlined'" />
        </div>
      </a-popconfirm>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DesignerLayerPanelTree from "./DesignerLayerPanelTree.vue";

export default defineComponent({
  name: "DesignerLayerPanel",
  components: {
    hvDesignerLayerPanelTree: DesignerLayerPanelTree,
  },
  props: {
    layerData: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const layerTreeRef = ref();

    //添加图层组
    const addGroup = () => {
      layerTreeRef.value.addGroup();
    };

    //删除勾选的节点
    const deleteCheckedNodes = () => {
      layerTreeRef.value.deleteCheckedNodes();
    };

    return {
      layerTreeRef,
      addGroup,
      deleteCheckedNodes,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerLayerPanel.less";
</style>
